<template>
  <div class="Mydata">
    <div class="mydata-box">
     <div class="userdata">
      <div class="user-img">
        <img :src="userdata.avatar_medium" alt="">
      </div>
      <div class="user-msg">
        <div class="user-name t">{{userdata.nick}}</div>
        <div class="user-add t">地址：{{userdata.location}}</div>
        <div class="user-experience t">经验值：{{userdata.point}}</div>
        <div class="user-introduction t">{{userdata.introduction}}</div>
      </div>
     </div>
     <div class="user-nav">
       <van-tabs v-model="active">
  <van-tab title="发布菜谱">
   <div class="sendcaipu">
    <div class="sendcaipu-box" v-for="(item ,index) in sengcaipudata" :key="index">
      <div class="sendcaipu-img">
      <img :src="item.image" alt="">
      </div>
      <div class="sendcaipu-day">
        第{{item.day}}天
      </div>
    </div>
   </div>
  </van-tab>
  <van-tab title="发布笔记">
     <div class="sendcaipu">
    <div class="sendbiji-box" v-for="(item ,index) in sengbijidata" :key="index">
      <div class="sendbiji-day">
       {{item.year_text}}{{item.month_text}}{{item.day_text}}
      </div>
       <div class="sendbiji-title" @click='gobijidatail(item.day_list[0].id)'>
      ##  {{item.day_list[0].title}} 
      </div>
    </div>
   </div>
  </van-tab>
  <van-tab title="收藏菜谱">
      <div class="collectcaipu">
    <div class="collectcaipu-box" v-for="(item ,index) in collectbijidata" :key="index"  @click='godatail(item.id)'>
      <div class="collect-title">
       {{item.n}}
      </div>
      <div class="collectcaipu-img">
        <img :src="item.img" alt="">
      </div>
      
     
    
    </div>
   </div>
  </van-tab>
</van-tabs>
     </div>
    </div>
    </div>
</template>

<script>
export default {
  name: "Mydata",
  data() {
    return {
      id:'',
      userdata: [],
      tagdata:[],
       active: 0,
       sengcaipudata:[],
       sengbijidata:[],
       collectbijidata:[]
    };
  },
  created() {
    this.id = this.$route.params.id

    this.getuserdata(this.id);
    this.getsendcaipu();
    this.getsendbiji();
    this.getcollectbiji()
  },
  methods: {
    //  跳转笔记详情
    gobijidatail(id) {
      this.$router.push({ name: "Bijidetail", params: { id } });
    },
    //  跳转菜谱详情
     godatail(id) {
      this.$router.push({ name: "Detail", params: { id } });
    },
    getuserdata() {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/douguo/user/info/"+`${this.id}`,
        
      })
        .then((res) => {
          // console.log('this.id==>',this.id);
          this.userdata = res.data.result.user;
          // this.tagdata = res.data.result.user.note_publish_toolbars;
          // console.log("res==>", res);
          
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    // 获取发布菜谱
    getsendcaipu(){
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/douguo/user/notescalendar/"+`${this.id}`+"/2021/11/",
        
      })
        .then((res) => {
          // console.log('this.id==>',this.id);
          // console.log(' this.sengcaipudata.image==>',res.data.result.day_list[0].image);
          this.sengcaipudata = res.data.result.day_list;
          // this.tagdata = res.data.result.user.note_publish_toolbars;
          // console.log("res==>", res);
            // console.log('res.data.result.day_list[0].id==>',res.data.result.day_list[0].__ob__.dep.id);
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    // 发布笔记
     getsendbiji(){
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/douguo/user/usernotescalendar/"+`${this.id}`+"/0/20",
        
      })
        .then((res) => {
          // console.log('this.id==>',this.id);
          // console.log(' this.sengbijidata.image==>',res.data.result.day_list[0].image);
          this.sengbijidata = res.data.result.notes;
          // this.tagdata = res.data.result.user.note_publish_toolbars;
          // console.log("res==>", res);
          // console.log(res.data.result.notes[0].day_list[0].images[0].u);
          
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
     // 收藏菜谱
     getcollectbiji(){
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/douguo/user/ufavorites/"+`${this.id}`+"/0/20",
        
      })
        .then((res) => {
          // console.log('this.id==>',this.id);
          // console.log(' this.sengbijidata.image==>',res.data.result.day_list[0].image);
          this.collectbijidata = res.data.result.recipes;
          // this.tagdata = res.data.result.user.note_publish_toolbars;
          console.log("res==>", res);
          
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    }
  },
};
</script>

<style lang="less" scoped>
// .mydata-box {

// }
.user-img{
  width: 30%;
  margin: 10px;
}
.user-img img{
  width: 100%;
 border-radius: 50%;
}
.userdata{
 display: flex;
}
.user-msg{
 font-size: 14px;
}
.user-name{
  margin: 10px 0 2px 0;
  font-size: 21px;
  font-weight: bold;
}
.t{
  color: #555;
}
.user-experience{
 margin: 2px 0;
}
.sendcaipu{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 20px;
}
.sendcaipu-box{
  width: 33%;
  position: relative;
}
.sendbiji-box{
width: 100%;

}
.sendcaipu-img{
  height: 100%;
}
.sendcaipu-img img{
  width: 100%;
  
}
.sendcaipu-day{
  position: absolute;
  bottom: 0;
  color: #fff;
  font-size: 15px;
}
.sendbiji-title{
  font-size: 17px;
  color: #fff;
  height: 30px;
  line-height: 30px;
   background-image: linear-gradient(135deg, red, blue);
  background-clip: text;
  color: transparent;
}
.sendbiji-day{
  font-size: 13px;
  margin: 10px 0 6px 0;
}
.collectcaipu{
  column-count: 2;
  margin: 0 2px;
}
.collectcaipu-img img{
  border-radius: 5px;
  width: 100%;
}
.collectcaipu-box{
 break-inside: avoid;

}
.collect-title{
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 background-color: rgba(181, 207, 34, 0.2);

  bottom:  10px;
}
</style>